<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
           img{
        width:400px;
        height:400px;
        position:fixed;
        left:0;
        z-index:1;
        visibility:hidden;
    }
    div.d{
        position: relative;
        z-index: 100;
    }
    a{
        display: inline-block;
        width: 90px;
        background-color: aquamarine;
        text-align: center;
        text-decoration: none;
        height: 30px;
        line-height: 30px;
    }
    /* 从左向右滑 */
    @keyframes img11{
        to{
            left: 0px;
        }
        from{
            left:-300px;
        }
    }
    div>img:target{
        z-index: 20;
        visibility: visible;
    }
    .img11:target{
        animation: img11 3s;
        /* -webkit-animation:img11 3s; */
    }
    /* 从下往上滑 */
    @keyframes img12{
        to{top: 0px;}
        from{top: 350px;}
    }
    .img21:target{
        animation: img12 3s;
    }
    /* 放大 */
    @keyframes img13{
        to{transform: scale(1);}
        from{transform: scale(0);}
    }
    .img31:target{
        animation: img13 4s;
    }
    /* 旋转和缩放 */
    @keyframes img14{
        to{transform: rotate(360deg) scale(1);}
        from{transform: rotate(0deg) scale(0);}
    }
    .img41:target{
        animation: img14 5s;
    }
    </style>
 
</head>
<body>
    <div>
        <img src="Images/p001.jpg" alt="" class="img11" id="img1">
        <img src="Images/p002.jpg" alt="" class="img21" id="img2">
        <img src="Images/p003.jpg" alt="" class="img31" id="img3">
        <img src="Images/p004.jpg" alt="" class="img41" id="img4">
        <div class="d">
            <a href="#img1">img1</a>
            <a href="#img2">img2</a>
            <a href="#img3">img3</a>
            <a href="#img4">img4</a>
        </div>
    </div>
</body>
</html>